<html>
<head>
<link rel="stylesheet" type="text/css" href="css/editor-table-style.css" />

<script type="text/javascript" src="js/jquery.pack.js"></script>
<script type="text/javascript" src="js/jquery.tablesorter.js"></script>
<script type="text/javascript" src="js/jquery.tableEditor.js"></script>


<script type="text/javascript">
$().ready(function() {	
	$("#editableTable").tableSorter({
		sortColumn: 'First Name',			// Integer or String of the name of the column to sort by.  
		sortClassAsc: 'headerSortUp', 		// class name for ascending sorting action to header
		sortClassDesc: 'headerSortDown',	// class name for descending sorting action to header
		headerClass: 'header', 				// class name for headers (th's)
		disableHeader: 'ID' 	// DISABLE Sorting on <th>ID</th>
	}).tableEditor({
		EDIT_HTML: 'EDIT2',
		SAVE_HTML: 'Save',
		FUNC_PRE_EDIT: 'preEdit',
		FUNC_POST_EDIT: 'postEdit',
		FUNC_PRE_SAVE: 'preSave',
		FUNC_UPDATE: 'updateTable'
	});
});

function updateTable(o) {
	alert('FUNC_UPDATE called');
}

function preSave(o) {
	alert('FUNC_PRE_SAVE called');
}

function postEdit(o) {
	alert('FUNC_POST_EDIT called');
}

function preEdit(o) {
	alert('FUNC_PRE_EDIT called');
}


</script>

</head>
<body>

<h1>TableEditor</h1>

<h2>Flexible in place editing of TableSorter</h2>
<hr>

<h3>SIMPLE EXAMPLE</h3>
<p><a href="demo.php">&laquo; Back to main page</a></p>
<p>This example simply alerts when each user defined function is called</p>

<table id="editableTable" border="0" cellspacing="0" cellpadding="0">
	<thead>
		<tr>
			<th >ID</th>
			<th >First Name</th>
			<th >Last Name</th>
			<th>Phone</th>
			<th >City</th>
			<th >Email</th>
		</tr>
		<tr>
			<td><a href="#.php" class="tsEditLink">(edit)</a></td>
			<td><input type="text" name="XXXX" value="YYYY"></input></td>
			<td>XXX</td>
			<td><input type="checkbox" checked name="zzTop"></input></td>
			<td><input type="checkbox" name="yyy"></input></td>
			<td><select name="yyy"><option>XXX</option><option SELECTED>YYY</option></select></td>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td><a href="#" class="tsEditLink">(edit)</a></td>
			<td>a</td>
			<td>Burgess</td>
			<td>(800)768-5283</td>
			<td>b</td>
			<td>c</td>
		</tr>
		<tr>
			<td><a href="#" class="tsEditLink">(edit)</a></td>
			<td>Christian</td>
			<td>Bach</td>
			<td>(800)768-6288</td>
			<td>a</td>
			<td>c</td>
		</tr>
	</tbody>
</table>

<br>


</body>
</html>
